<template>
  <view :data-theme="theme">
    <view class="CommissionRank">
      <view class="header">
        <view class="rank" v-if="ranking">您目前的排名
          <text class="num">{{ ranking }}</text>
          名
        </view>
        <view class="rank" v-else>您目前暂无排名</view>
      </view>
      <view class="wrapper">
        <view class="nav acea-row row-around">
          <view class="item" :class="active == index ? 'font_color' : ''" v-for="(item,index) in navList" :key="index"
                @click="switchTap(index)">
            {{ item }}
          </view>
        </view>
        <view class="list">
          <view class="item acea-row row-between-wrapper" v-for="(item,index) in rankList" :key="index">
            <view class="num" v-if="index <= 2">
              <image :src="'../static/images/no'+(index+1)+'.png'"></image>
            </view>
            <view class="num" v-else>
              {{ index + 1 }}
            </view>
            <view class="picTxt acea-row row-between-wrapper">
              <view class="pictrue">
                <image :src="item.avatar"></image>
              </view>
              <view class="text line1">{{ item.nickname }}</view>
            </view>
            <view class="people font_color">￥{{ item.brokeragePrice }}</view>
          </view>
        </view>
        <view class='loadingicon acea-row row-center-wrapper'>
          <text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>
        </view>
        <view class='noCommodity' v-if="rankList.length == 0 && isShow">
          <emptyPage title="暂无排行～" mTop="30%" :imgSrc="urlDomain+'crmebimage/presets/noJilu.png'"></emptyPage>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  getBrokerageRank
} from '@/api/user.js';
import {toLogin} from '@/libs/login.js';
import emptyPage from '@/components/emptyPage.vue'
import {mapGetters} from "vuex";
import {setThemeColor} from '@/utils/setTheme.js'

const app = getApp();
export default {
  components: {
    emptyPage
  },
  data() {
    return {
      urlDomain: this.$Cache.get("imgHost"),
      navList: ["周排行", "月排行"],
      active: 0,
      rankList: [],
      loadend: false,
      loading: false,
      loadTitle: '加载更多',
      type: 'week',
      ranking: 0,
      isShow: false,
      theme: app.globalData.theme,
      bgColor: '#8B4513'
    };
  },
  computed: mapGetters(['isLogin', 'uid']),
  watch: {
    isLogin: {
      handler: function (newV, oldV) {
        if (newV) {
          this.getBrokerageRankList();
        }
      },
      deep: true
    }
  },
  onLoad() {
    if (this.isLogin) {
      this.getBrokerageRankList();
    } else {
      toLogin();
    }
    let that = this;
    that.bgColor = setThemeColor();
    uni.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: that.bgColor,
    });
  },
  methods: {
    switchTap: function (index) {
      this.active = index;
      this.type = index ? 'month' : 'week';
      this.page = 1;
      this.loadend = false;
      this.$set(this, 'rankList', []);
      this.getBrokerageRankList();
    },
    getBrokerageRankList: function () {
      if (this.loadend) return;
      if (this.loading) return;
      this.loading = true;
      this.loadTitle = '';
      this.loading = true;
      this.isShow = false;
      getBrokerageRank({
        type: this.type
      }).then(res => {
        let list = res.data || [];
        this.$set(this, 'rankList', list);
        if (list.length > 0) this.ranking = list.findIndex((itm) => {
          return itm.id === this.uid
        }) + 1;
        this.loading = false;
        this.isShow = true;
      }).catch(err => {
        this.loading = false;
        this.loadTitle = '加载更多';
      })
    }
  },
  onReachBottom: function () {
    this.getBrokerageRankList();
  }
}
</script>

<style scoped lang="scss">
.CommissionRank .header {
  background: url("");
  @include main_bg_color(theme);
  width: 100%;
  height: 344rpx;
  background-size: 100% 100%;
}

.CommissionRank .header .rank {
  font-size: 33rpx;
  color: #fff;
  position: absolute;
  top: 160rpx;
  left: 48rpx;
}

.CommissionRank .header .rank .num {
  font-size: 51rpx;
  font-weight: bold;
  margin: 0 10rpx;
}

.CommissionRank .wrapper {
  width: 710rpx;
  background-color: #fff;
  border-radius: 14rpx;
  margin: -76rpx auto 0 auto;
}

.CommissionRank .wrapper .nav {
  height: 99rpx;
  border-bottom: 2.5rpx solid #f3f3f3;
  font-size: 30rpx;
  font-weight: bold;
  color: #999;
  line-height: 99rpx;
}

.CommissionRank .wrapper .nav .item.font_color {
  @include main_color(theme);
  @include tab_border_bottom(theme);
  margin-top: -2rpx;
}

.CommissionRank .wrapper .list {
  padding: 0 30rpx;
}

.CommissionRank .wrapper .list .item {
  border-bottom: 1px solid #f3f3f3;
  height: 101rpx;
  font-size: 28rpx;
}

.CommissionRank .wrapper .list .item .num {
  color: #666;
  width: 70rpx;
}

.CommissionRank .wrapper .list .item .num image {
  width: 40rpx;
  height: 40rpx;
  display: block;
}

.CommissionRank .wrapper .list .item .picTxt {
  width: 350rpx;
}

.CommissionRank .wrapper .list .item .picTxt .pictrue {
  width: 68rpx;
  height: 68rpx;
}

.CommissionRank .wrapper .list .item .picTxt .pictrue image {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}

.CommissionRank .wrapper .list .item .picTxt .text {
  width: 262rpx;
  color: #333;
}

.CommissionRank .wrapper .list .item .people {
  width: 175rpx;
  text-align: right;
}

.font_color {
  @include price_color(theme);
}
</style>
